<template>
    <div id="new-position">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="new-position-title"><span>Reference: </span></div>
                    <el-input
                            class="new-position-input"
                            placeholder="Reference"
                            size="small"
                            v-model="formReference">
                    </el-input>
                    <br/>
                    <div class="new-position-title"><span>Position: </span></div>
                    <el-input
                            class="new-position-input"
                            placeholder="Position"
                            size="small"
                            v-model="formPosition">
                    </el-input>
                    <br/>
                    <div class="new-position-title"><span>Reporting to: </span></div>
                    <el-input
                            class="new-position-input"
                            placeholder="Reporting To"
                            size="small"
                            v-model="formReporting">
                    </el-input>
                    <br/>
                    <div class="new-position-title"><span>Location: </span></div>
                    <el-input
                            class="new-position-input"
                            placeholder="Location"
                            size="small"
                            v-model="formLocation">
                    </el-input>
                    <br/>
                    <div class="new-position-title"><span>Type: </span></div>
                    <el-input
                            class="new-position-input"
                            placeholder="Position Type"
                            size="small"
                            v-model="formType">
                    </el-input>
                    <br/>
                    <div class="new-position-title"><span>Starting Date: </span></div>
                    <el-date-picker
                            class="new-position-input"
                            placeholder="Starting Date"
                            type="date"
                            size="small"
                            :picker-options="pickerOptions0"
                            v-model="formStartingDate">
                    </el-date-picker>
                    <br/>
                    <div class="new-position-title"><span>Monthly Salary: </span></div>
                    <el-input
                            class="new-position-input"
                            placeholder="Monthly Salary (RMB)"
                            size="small"
                            v-model="formSalary">
                    </el-input>
                    <br/>
                    <div class="new-position-title"><span>Benefits include: </span></div>
                    <ckeditor
                            v-model="formBenefits"
                            :id="benefitsEditor"
                            :height="'150px'">
                    </ckeditor>
                    <div class="new-position-title new-position-title-responsibility" ><span>Responsibilities include but not limited to: </span></div>
                    <ckeditor
                            v-model="formResponsibility"
                            :id="responsibilityEditor"
                            :height="'150px'">
                    </ckeditor>
                    <div class="new-position-title"><span>Key requirements: </span></div>
                    <ckeditor
                            v-model="formRequirements"
                            :id="requirementsEditor"
                            :height="'150px'">
                    </ckeditor>
                    <div class="new-position-title"><span>Job description: </span></div>
                    <ckeditor
                            v-model="formDescription"
                            :id="descriptionEditor"
                            :height="'150px'">
                    </ckeditor>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 col-md-offset-3">
                    <el-button class="new-position-submit"
                               type="success"
                               @click="updateThePosition">
                        Update
                    </el-button>
                </div>
                <div class="col-md-2 col-md-offset-1">
                    <el-button class="new-position-submit"
                               type="danger"
                               @click="cancel">
                        Cancel
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import { Loading } from 'element-ui';
    import Ckeditor from './components/ckeditor.vue'
    export default {
        name: 'new-position',
        components: {
            Ckeditor
        },
        data: function () {
            return {
                loading: Loading.service({ fullscreen: true, text: 'Loading' }),
                benefitsEditor: 'editor-a',
                responsibilityEditor: 'editor-b',
                requirementsEditor: 'editor-c',
                descriptionEditor: 'editor-d',
                formReference: '',
                formPosition: '',
                formReporting: '',
                formLocation: '',
                formType: '',
                formStartingDate: '',
                formSalary: '',
                formBenefits: '',
                formResponsibility: '',
                formRequirements: '',
                formDescription: '',
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                }
            }
        },
        created () {
            this.getData()
        },
        methods: {
            getData () {
                this.getPositionsById(this, (data) => {
                    console.log(data[0])
                    let position = data[0]
                    this.formReference = position.reference
                    this.formPosition = position.position
                    this.formReporting = position.reportTo
                    this.formLocation = position.location
                    this.formType = position.type
                    this.formStartingDate = position.startDate
                    this.formSalary = position.monthlySalary
                    this.formBenefits = position.benefits
                    this.formResponsibility = position.responsibility
                    this.formRequirements = position.requirements
                    this.formDescription = position.description
                    this.loading.close()
                })
            },
            updateThePosition () {
                this.loading = Loading.service({ fullscreen: true, text: 'Loading' })
                const options = {
                    id: this.$route.params.id,
                    reference: this.formReference,
                    position: this.formPosition,
                    reportTo: this.formReporting,
                    location: this.formLocation,
                    type: this.formType,
                    startDate: this.formStartingDate,
                    monthlySalary: this.formSalary,
                    benefits: this.formBenefits,
                    responsibility: this.formResponsibility,
                    requirements: this.formRequirements,
                    description: this.formDescription,
                    expired: 0,
                    template: -1
//                    templateName: ''
                }
                this.updatePosition(this, options, (data) => {
                    this.loading.close()
                    this.$alert(`${data.position} update successfully！`, 'congratulations!', {
                        confirmButtonText: 'Click to Current Position List',
                        callback: () => {
                            router.push('/curpositions')
                        }
                    });
                })
            },
            cancel () {
                this.$confirm('You not finish updating, really want to cancel?', 'Confirm', {
                    confirmButtonText: 'Confirm',
                    cancelButtonText: 'Back',
                    type: 'warning'
                }).then(() => {
                    router.push('/curpositions')
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="sass" scoped>
    .new-position {
        &-title {
            color: black;
            display: inline-block;
            width: 10em;
            margin-bottom: 2em;
            font-size: 1.1em;
            font-weight: 200;

            &-responsibility {
                width: 20em;
            }
        }
        &-input {
            display: inline-block;
            width: 40%;
        }
        &-submit {
            width: 100%;
            margin-bottom: 3em;
        }
    }

    .ckeditor {
        margin-bottom: 2em;
        margin-top: -2em;
    }
</style>